<!--
 * @Author: your name
 * @Date: 2021-06-15 17:15:25
 * @LastEditTime: 2021-08-24 12:52:30
 * @LastEditors: yuechong
 * @Description: In User Settings Edit
 * @FilePath: \pyxqzhifa\src\views\dashboard\Analysis.vue
-->
<!--工作反馈-->
<template>
  <div class="analy_content">
    <div class="tag-content">
      <!-- <div class="tag-content">
        <span>行政区划：</span>
        <el-select
          style="width:50%"
          v-model="townCode"
          placeholder="请选择行政区划"
          @change="onSelect"
          clearable
        >
          <el-option
            v-for="(item, index) in deepSectionList"
            :key="index"
            :value="item.code"
            :label="item.name"
          ></el-option>
        </el-select>
      </div>-->
      <div class="tag-content_date">
        <div class="tag_date_left">
          <p
            class="ant_date"
            @click="handCheckDate(item)"
            v-for="item in dataedList"
            :class="{ ant_date_active: activeDate == item.value }"
            :key="item.value"
          >{{ item.name }}</p>
        </div>
        <div class="tag_date_right">
          <el-date-picker
            v-model="dateArray"
            format="YYYY-MM-DD"
            type="daterange"
            range-separator="-"
            start-placeholder="请输入开始时间"
            end-placeholder="请输入结束时间"
            @change="onDateChange"
          ></el-date-picker>
        </div>
      </div>
    </div>
    <div class="tag_content_Map_box">
      <div class="pyxq_left">
        <el-button
          v-if="isVillageBack"
          type="primary"
          size="mini"
          @click="hangtownBack"
          class="village_back"
        >返回上一级</el-button>
        <PYXQMAP
          class="prxqmap_box"
          @initStatic="initStatic"
          @isVillageBack="handVillageBack"
          ref="pyxqmap1"
        ></PYXQMAP>
      </div>

      <div class="pyxq_right">
        <div class="state_total pyxq_right_top">
          <div class="report_state_box">
            <div class="report_total">
              <p class="report_total_value">
                <span class="report_total_value_num">{{ reportNumber }} 10</span>
                <span class="report_total_value_unit">个</span>
              </p>
              <p class="report_total_title">线索登记总数</p>
            </div>
            <div class="report_total">
              <p class="report_total_value">
                <span class="report_total_value_num">{{ countNumber }} 20</span>
                <span class="report_total_value_unit">次</span>
              </p>
              <p class="report_total_title">立案总数</p>
            </div>
            <div class="report_total">
              <p class="report_total_value">
                <span class="report_total_value_num">{{ illegalNumber }} 100</span>
                <span class="report_total_value_unit">个</span>
              </p>
              <p class="report_total_title">结案总数</p>
            </div>
          </div>
        </div>
        <div class="state_total pyxq_right_center">
          <div class="report_name">违法举报趋势</div>
          <div class="routIns_box">
            <div ref="chartBar" style="width:100% ;height: 300px;"></div>
            <!-- <REPORTREND ref="reportrend"></REPORTREND> -->
          </div>
        </div>
        <div class="state_total pyxq_right_bottom">
          <div class="report_name">违法类型统计</div>
          <div class="village_color progree_color">
            <div ref="chart" style="width:100% ;height: 240px;"></div>
            <div ref="chart2" style="width:100% ;height: 240px;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { ChartUtil } from "@/utils/chartUtil.js";
import PYXQMAP from "@/components/echarts/analyMap.vue";
import STATEPIE from "@/components/echarts/statepie.vue";
import REPORTREND from "@/components/echarts/reportrend.vue";
import progressColor from "@/components/echarts/ProgressColor.vue";
import pyxqxz from "@/assets/GeoJSON/pyxqxz.json";
import hdzz from "@/assets/GeoJSON/hdzz.json";
import qbx from "@/assets/GeoJSON/qbx.json";
import szz from "@/assets/GeoJSON/szz.json";
import ywz from "@/assets/GeoJSON/ywz.json";
import zlx from "@/assets/GeoJSON/zlx.json";
import yxnmc from "@/assets/GeoJSON/yxnmc.json";
import xxs from "@/assets/GeoJSON/xxs.json";
const plainOptions = ["师寨镇", "祝楼乡", "桥北乡", "韩董庄乡", "原武镇"];
export default {
  name: "analysis1",
  components: {
    PYXQMAP,
    STATEPIE,
    REPORTREND,
    progressColor
    //PROGRESS
  },
  data() {
    return {
      townCode: "",
      totals: 500,
      projectAdjustDataArray: [
        {
          tenant: "违法转让",
          usage_count: 10,
          bgColor: "#FFB11A"
        },
        {
          tenant: "违法占地",
          usage_count: 50,
          bgColor: "#1B7DFF"
        },
        {
          tenant: "违法批地",
          usage_count: 30,
          bgColor: "#C86DF2"
        },
        {
          tenant: "其他",
          usage_count: 20,
          bgColor: "#F86846"
        }
      ],
      sectionList: [],
      deepSectionList: [],
      activeTag: "全区",
      activeDate: "3",
      indeterminate: true,
      checkAll: false,
      isVillageBack: false,
      reportData: [
        { value: "", name: "未办理" },
        { value: "", name: "办理中" },
        { value: "", name: "已办结" }
      ],
      countNumber: "",
      reportNumber: "",
      illegalNumber: "",
      reportTrend: [],
      illegalType: {},
      reposTotals: "", //举报线索总数
      patrolTotals: "", //巡查总数
      patrolDist: "", //巡查距离
      patroTime: "", //巡查时间
      surveyLoads: "", //调查中
      reactDones: "", //整改后
      checkedList: ["全区", "师寨镇", "祝楼乡", "桥北乡", "韩董庄乡", "原武镇"],
      MapAdressName: "XZQMC",
      VillageCenter: [37747564, 3876624],
      dataedList: [
        {
          name: "今日",
          value: 1
        },
        {
          name: "本周",
          value: 2
        },
        {
          name: "本月",
          value: 3
        },
        {
          name: "半年",
          value: 4
        },
        {
          name: "全年",
          value: 5
        }
      ],
      seachParams: {
        code: "",
        begin: "",
        end: "",
        dateCheck: 3
      },
      dateArray: []
      // list: {
      //   homeStatic: '/business/statistics/home', //首页统计
      //   townList: '/sys/category/rootList'
      // }
    };
  },
  mounted() {
    this.town();
    this.drawBar();
    this.drawPie1();
    this.drawPie2();
    this.initStatic(pyxqxz, this.VillageCenter, this.MapAdressName, "");
  },
  methods: {
    async drawBar(list) {
      const tooltip = {
          trigger: 'axis',
          borderColor: '#fff',
          backgroundColor: 'rgba(255,255,255,0.8)',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        };
      const grid= {
          top: 30,
          left: '2%',
          right: '2%',
          bottom: '3%',
          containLabel: true
        };
      const xAxis = [{
        data: [2022-1, 2022-2, 2022-3, 2022-4, 2022-5],
        type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: { interval: 0, rotate: 30 },
            axisLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#8097B1'
              }
            }
      }];
      const yAxis= [
          {
            minInterval: 1,//设置成1保证坐标轴分割刻度显示成整数。
            type: 'value',
            axisTick: {
              show: false
            },
            // max: 10,
            // min: 0,
            axisLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#8097B1'
              }
            }
          }
        ];
      let color = ["#61A4E4", "#FFC533", "#00D897", "#FF8A8A"];
      const series = [
        {
          type: "line",
          radius: "55%",
          center: ["50%", "50%"],
          data: [10, 120, 220, 306, 480, 509],
          smooth: true, //是否平滑曲线显示
          symbolSize: 4,
          lineHeight: 56,
          label: {
            normal: {
              show: false
            }
          },
          tooltip: {
            trigger: "item",
            formatter: "{b} : {c}个"
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        }
      ];
      ChartUtil.categoryBar({
        _this: this,
        dom: this.$refs.chartBar,
        color: color,
        tooltip: tooltip,
        xAxis: xAxis,
        yAxis: yAxis,
        series: series,
      });
    },
    async drawPie1(list) {
      let data = [
        { name: "1", value: 23 },
        { name: "2", value: 23 },
        { name: "3", value: 23 },
        { name: "4", value: 23 },
        { name: "5", value: 23 }
      ];
      let legend = {
        icon: "circle",
        itemWidth: 12,
        itemHeight: 12,
        borderRadius: 8,
        bottom: "bottom"
      };
      let color = ["#61A4E4", "#FFC533", "#00D897", "#FF8A8A"];
      const series = [
        {
          type: "pie",
          radius: "55%",
          center: ["50%", "50%"],
          data: data,
          label: {
            normal: {
              show: false
            }
          },
          tooltip: {
            trigger: "item",
            formatter: "{b} : {c}个"
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        }
      ];
      ChartUtil.drawPie({
        _this: this,
        dom: this.$refs.chart,
        series: series,
        legend: legend,
        color: color
      });
    },
    async drawPie2(list) {
      let data = [
        { name: "1", value: 23 },
        { name: "2", value: 23 },
        { name: "3", value: 23 },
        { name: "4", value: 23 },
        { name: "5", value: 23 }
      ];
      let legend = {
        icon: "circle",
        itemWidth: 12,
        itemHeight: 12,
        borderRadius: 8,
        left: "50%",
        bottom: "bottom"
      };
      let color = ["#61A4E4", "#FFC533", "#00D897", "#FF8A8A"];
      const series = [
        {
          type: "pie",
          radius: "55%",
          center: ["70%", "50%"],
          data: data,
          label: {
            normal: {
              show: false
            }
          },
          tooltip: {
            trigger: "item",
            formatter: "{b} : {c}个"
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        }
      ];
      ChartUtil.drawPie({
        _this: this,
        dom: this.$refs.chart2,
        series: series,
        legend: legend,
        color: color
      });
    },
    onSelect(val) {
      this.seachParams.code = val;
      let selectAdress = this.deepSectionList.find(item => item.code == val);
      let selectName = selectAdress ? selectAdress.name : "";
      let villageCenter = this.VillageCenter;
      let MapAdressName = "ZLDWMC";
      switch (selectName) {
        case "师寨镇":
          villageCenter = [37753828, 3885239];
          this.initStatic(szz, villageCenter, MapAdressName, val, true);
          break;
        case "桥北乡":
          villageCenter = [37741197, 3873863];
          this.initStatic(qbx, villageCenter, MapAdressName, val, true);
          break;
        case "祝楼乡":
          villageCenter = [37745616, 3880820];
          this.initStatic(zlx, villageCenter, MapAdressName, val, true);
          break;
        case "原武镇":
          villageCenter = [37755213, 3879698];
          this.initStatic(ywz, villageCenter, MapAdressName, val, true);
          break;
        case "韩董庄镇":
          villageCenter = [37755015.387983];
          this.initStatic(hdzz, villageCenter, MapAdressName, val, true);
          break;
        case "原阳县农牧场":
          villageCenter = [37755015.387983];
          this.initStatic(yxnmc, villageCenter, MapAdressName, val, true);
          break;
        default:
          villageCenter = [37747564, 3876624];
          MapAdressName = "XZQMC";
          this.initStatic(pyxqxz, villageCenter, MapAdressName, "", false);
          break;
      }
    },
    town() {
      //镇
      let params = {
        pid: "1405467282784903169"
      };
    },
    computeRate(Data) {
      Data.map(item => {
        item.countUsageRate = `${parseInt(
          (100 * item.usage_count) / this.totals
        ).toString()}%`;
        return item;
      });
    },
    geTotals(data) {
      return data.reduce((prav, next) => {
        return prav + Number(next.usage_count);
      }, 0);
    },
    randomHexColor() {
      // 随机生成十六进制颜色
      let hex = Math.floor(Math.random() * 16777216).toString(16); // 生成ffffff以内16进制数
      while (hex.length < 6) {
        // while循环判断hex位数，少于6位前面加0凑够6位
        hex = `0${hex}`;
      }
      const color = `#${hex}`;
      return color; // 返回‘#'开头16进制颜色
    },
    //选择tag
    handCheckTag(checked) {
      this.activeTag = checked;
    },
    hangtownBack() {
      this.initStatic(
        pyxqxz,
        this.VillageCenter,
        this.MapAdressName,
        "",
        false
      );
      this.isVillageBack = false;
    },
    handVillageBack() {
      this.isVillageBack = true;
    },
    //选择日期
    handCheckDate(item) {
      this.activeDate = item.value;
      this.seachParams.dateCheck = item.value;
      this.dateArray = [];
      this.seachParams.begin = "";
      this.seachParams.end = "";
      this.initStatic(
        pyxqxz,
        this.VillageCenter,
        this.MapAdressName,
        this.seachParams.code
      );
    },
    /**举报时日期*/
    onDateChange: function(value, dateString) {
      this.seachParams.begin = dateString[0];
      this.seachParams.end = dateString[1];
      this.seachParams.dateCheck = "";
      this.activeDate = "";
      this.initStatic(
        pyxqxz,
        this.VillageCenter,
        this.MapAdressName,
        this.seachParams.code
      );
    },
    /**多选 */
    onChange(checkedList) {
      this.indeterminate =
        !!checkedList.length && checkedList.length < plainOptions.length;
      this.checkAll = checkedList.length === plainOptions.length;
    },
    onCheckAllChange(e) {
      Object.assign(this, {
        checkedList: e.target.checked ? plainOptions : [],
        indeterminate: false,
        checkAll: e.target.checked
      });
    },
    initStatic(mapJson, villageCenter, mapAdressName, villageCode) {
      var MapJson = "";
      var VillageCenter = "";
      var MapAdressName = "";
      MapJson = mapJson;
      VillageCenter = villageCenter;
      MapAdressName = mapAdressName;
      this.seachParams.code = villageCode;
      this.$refs.pyxqmap1.drawMap("", MapJson, MapAdressName, VillageCenter);
      // this.$refs.reportrend.initReportRend([], [])
      this.computeRate(this.projectAdjustDataArray);
      // this.getAction(this.list.homeStatic, this.seachParams).then(res => {
      //   if (res.success) {
      //     let topographicMapStatistics = ''
      //     console.log('villageCode=>', villageCode)
      //     if (this.isVillageBack) {
      //       topographicMapStatistics = initMapVillageData(res.result.topographicMapStatisticsTown)
      //     } else {
      //       topographicMapStatistics = initMapData(res.result.topographicMapStatistics)
      //     }
      //
      //     this.countNumber = res.result.dailyInspection.countNumber
      //     this.reportNumber = res.result.reportNumber.reportNumber
      //     this.illegalNumber = res.result.illegalNumber.illegalNumber
      //     this.reportTrend = res.result.reportTrend
      //     // res.resutl.illegalType.forEach((item,idx)=>{
      //     //   this.projectAdjustDataArray[idx].usage_count=
      //     // })
      //     let dataTimes = []
      //     let dataValues = []
      //     if (res.result.reportTrend.length > 0) {
      //       res.result.reportTrend.forEach(item => {
      //         dataTimes.push(item.datetime)
      //         dataValues.push(item.amount)
      //       })
      //     }
      //     this.$refs.reportrend.initReportRend(dataTimes, dataValues)
      //     if (res.result.illegalType[0]) {
      //       this.projectAdjustDataArray[0].usage_count = res.result.illegalType[0].wfzr
      //       this.projectAdjustDataArray[1].usage_count = res.result.illegalType[0].wfzd
      //       this.projectAdjustDataArray[2].usage_count = res.result.illegalType[0].wfpd
      //       this.projectAdjustDataArray[3].usage_count = res.result.illegalType[0].other
      //       this.totals = this.geTotals(this.projectAdjustDataArray)
      //       this.computeRate(this.projectAdjustDataArray)
      //     }
      //   }
      // })
    }
  }
};
</script>
<style lang="less" scoped>
.analy_content {
  width: 100%;
  height: 95%;
  border: none;
  background: #fff;
  .tag-content {
    padding: 15px 10px;
    border-bottom: solid 1px #cacaca;
    width: 100%;
    height: 60px;
    // display: flex;
    // justify-content: center;
    align-items: center;
    .ant_tag_active {
      color: #ffffff;
      background: #409eff;
    }
  }
  .tag-content_date {
    width: 50%;
    float: right;
    display: flex;
    justify-content: space-between;
    .tag_date_left {
      width: 410px;
      height: 30px;
      background: #fff;
      border-radius: 6px;
      display: flex;
      justify-content: center;
      align-items: center;
      .ant_date {
        width: 80px;
        height: 40px;
        font-size: 16px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #666666;
        line-height: 40px;
        border-radius: 6px;
        text-align: center;
        transition: all 1.5s ease;
      }
      .ant_date_active {
        color: #ffffff;
        background: #6eceff;
      }
    }
    .tag_date_right {
      width: 460px;
      height: 40px;
      margin: 0 20px;
    }
  }
  .tag_content_Map_box {
    width: 100%;
    //padding-top: 15px;
    height: calc(100vh - 200px);
    display: flex;
    .report_name {
      padding: 5px;
      padding-left: 30px;
      font-size: 16px;
      color: #1b7dff;
      font-weight: 800;
    }
    .pyxq_left {
      position: relative;
      width: 45%;
      height: 100%;
      .village_back {
        position: absolute;
        top: 10;
        right: 10;
        z-index: 99;
      }
    }
    .pyxq_right {
      width: 55%;
      height: 100%;
      // border: 1px solid red;
      .state_total {
        width: 100%;
        height: 30%;
      }
      .pyxq_right_top {
        height: 15%;
        .report_state_box {
          padding: 15px 0;
          width: 100%;
          // border: 1px solid red;
          height: 100%;
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          position: relative;
          .report_total {
            // width: 250px;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            width: 30%;
            height: 100%;
            // height: 200px;
            background: #ffffff;
            box-shadow: 0px 0px 10px 0px rgba(167, 167, 167, 0.27);
            border-radius: 6px;
            // border: 1px solid red;
            overflow: hidden;
            text-align: center;
            img {
              margin-top: 20px;
              width: 80px;
              height: 80px;
            }
            .report_total_value {
              width: 100%;
              // margin-top: 10.5%;
              font-family: Adobe Heiti Std;
              font-weight: bold;
              color: #333333;
              // line-height: 64px;
              .report_total_value_num {
                font-size: 30px;
              }
              .report_total_value_unit {
                font-size: 20px;
              }
            }
            .report_total_title {
              // margin-top: 5%;
              width: 100%;
              font-size: 16px;
              font-family: Adobe Heiti Std;
              font-weight: normal;
              color: #999999;
            }
          }
          .report_total_number {
            position: absolute;
            top: 0;
            right: 14%;
            z-index: 99;
            .report_total_number_name {
              letter-spacing: 1px;
              color: #778fa2;
              font-size: 16px;
            }
            .report_total_number_value {
              color: #1b7dff;
              font-size: 16px;
              font-weight: 600;
              padding-left: 5px;
            }
          }
          .report_state_left {
            width: 100%;
          }
          .report_total_right {
            width: 50%;
          }
        }
      }
      .pyxq_right_center {
        height: 42%;
        .routIns_box {
          padding: 0 50px 0 0;
          width: 100%;
          height: calc(100% - 30px);
          // display: flex;
          // justify-content: space-evenly;
          // align-items: center;
        }
      }
      .pyxq_right_bottom {
        position: relative;
        height: 22.5%;
        .progree_color {
          width: 80%;
          padding-left: 10px;
          font-size: 16px;
          font-family: Adobe Heiti Std;
          font-weight: normal;
          display: flex;
          .village_color_box_title_name {
            margin-left: 11px;
            color: #8399ab;
          }
          .village_color_box_title_num {
            color: #333333;
          }
        }
        .pyxq_right_bottom_xiaohao {
          width: 100%;
          height: calc(100% - 60px);
          margin-top: 2%;
          display: flex;
          justify-content: space-between;
          //padding: 0 20px;
          .xiaohao {
            align-self: flex-end;
            display: flex;
            width: 45%;
            height: 100%;
            border-radius: 10px;
            overflow: hidden;
            .xiaohao_left {
              width: 10%;
              height: 100%;
              background: #328bff;
            }
            .xiaohao_center {
              background: #f2f6ff;
              width: 65%;
              height: 100%;
              p {
                font-size: 20px;
                font-family: Adobe Heiti Std;
                font-weight: normal;
                color: #333333;
                padding-left: 20px;
                padding-top: 20px;
              }
            }
            .xiaohao_right {
              background: #f2f6ff;
              width: 25%;
              height: 100%;
              display: flex;
              align-items: flex-end;
              justify-content: center;
              p {
                margin-bottom: 20px;
                color: #328bff;
                span:nth-child(1) {
                  font-size: 22px;
                  font-weight: 600;
                }
                span:nth-child(2) {
                  font-size: 14px;
                  padding-left: 5px;
                }
              }
            }
          }
          .xiaohao_done {
            .xiaohao_left {
              background: #76ddca;
            }
            .xiaohao_center {
              background: #eafefa;
            }
            .xiaohao_right {
              background: #eafefa;
              p {
                color: #76ddca;
              }
            }
          }
        }
      }
    }
  }
}
p {
  margin: 0;
}
</style>
